<template>
	<view class="content">
		<view class="top">
			<image class="bg" src="@/static/img/sign-bg.png" mode="widthFix"></image>
			<image class="font" src="@/static/img/logo_2.png" mode="widthFix"></image>
		</view>
		<!-- <view class="item" v-if="type==1 &&!isback">
			<p>原密码</p>
			<p><input class="uni-input" type="safe-password" password="true" placeholder="请输入原密码" v-model="oldPassword"
					placeholder-class="input_p" /></p>
		</view> -->
		<view class="cent">
			<view class="c_title">
				<view class="c_title_l">用户注册</view>
				<view class="c_title_r">已有账号？<text @click="login">直接登录</text></view>
			</view>
			<view class="item" v-if="isback">
				<p>手机号</p>
				<p>{{phone}}</p>
			</view>
			<view class="item">
				<image src="../../static/img/sign-info-01.png" mode="widthFix"></image>
				<p>昵称</p>
				<p>
					<input class="uni-input" placeholder="请输入昵称" v-model="nickname" placeholder-class="input_p" />
				</p>
			</view>
			<view class="item">
				<image src="../../static/img/forgot-01.png" mode="widthFix"></image>
				<p>手机号码</p>
				<p>
					<input class="uni-input" placeholder="请输入手机号码" v-model="phone" placeholder-class="input_p" />
				</p>
			</view>
			<view class="item">
				<image src="../../static/img/forgot-02.png" mode="widthFix"></image>
				<p>手机验证码</p>
				<p>
					<input class="uni-input" placeholder="" v-model="code" placeholder-class="input_p" />
				</p>
				<text v-if="!istime" class="get get_btn" @click="get()" id="code_text">获取验证码</text>
				<text v-if="istime" class="get" id="code_text">{{countdown}}s</text>
			</view>
			<view class="item">
				<image src="../../static/img/forgot-03.png" mode="widthFix"></image>
				<p>Email</p>
				<p>
					<input class="uni-input" placeholder="请输入常用的邮箱" v-model="email" placeholder-class="input_p" />
				</p>
			</view>
			<!-- <view class="item">
				<image src="../../static/img/forgot-02.png" mode="widthFix"></image>
				<p>邮箱验证码</p>
				<p>
					<input class="uni-input" placeholder="" v-model="code" placeholder-class="input_p" />
				</p>
				<text v-if="!istime" class="get get_btn" @click="get()" id="code_text">获取验证码</text>
				<text v-if="istime" class="get" id="code_text">{{countdown}}s</text>
			</view> -->
			<view class="item">
				<image src="../../static/img/sign-info-02.png" mode="widthFix"></image>
				<p>密码</p>
				<p><input class="uni-input" type="safe-password" password="true" placeholder="请输入新密码"
						v-model="newPassword" placeholder-class="input_p" /></p>
			</view>
			<view class="item">
				<image src="../../static/img/sign-info-02.png" mode="widthFix"></image>
				<p>确认密码</p>
				<p><input class="uni-input" type="safe-password" password="true" placeholder="请再次输入新密码"
						v-model="ageinPassword" placeholder-class="input_p" /></p>
			</view>
			<view class="item">
				<image src="../../static/img/sign-info-02.png" mode="widthFix"></image>
				<p>二级密码</p>
				<p><input class="uni-input" type="safe-password" password="true" placeholder="请输入二级密码"
						v-model="payPassword" placeholder-class="input_p" /></p>
			</view>

			<view class="btn" @click="register">注册</view>
		<view class="tongyi">
			<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
			<view class="">同意<text @click="word(2)">注册协议</text>和<text @click="word(3)">隐私政策</text></view>
		</view>
		</view>
	</view>
</template>

<script>
	import {userRegister,userCode} from '@/common/js/index.js'
	export default {
		data() {
			return {
				nickname: "",
				phone: '',
				code: '',
				email: '',
				// oldPassword: "",
				newPassword: '',
				ageinPassword: '',
				type: '1',
				isback: false,
				countdown: 120,
				timer: '',
				istime: false,
				requestStatus: false,
				hobby: [{
					text: '',
					value: 0
				}],
				checkbox1: '',
				payPassword: '',
			}
		},
		onLoad(e) {
			// console.log(e);
			// this.type = e.type
			// this.phone = e.phone
			// if (this.type == 1) {
			// 	uni.setNavigationBarTitle({
			// 		title: '修改登录密码'
			// 	});
			// } else {
			// 	uni.setNavigationBarTitle({
			// 		title: '修改二级密码'
			// 	});
			// 	this.isback = true
			// }
		},
		methods: {
			word(e) {
				uni.navigateTo({
					url:'/pages/index/word?type='+e
				})
			},
			login() {
				uni.navigateTo({
					url:'/pages/inlet/login'
				})
				// uni.navigateBack()
			},
			get() {
				// var that = this
				userCode({
					mobile:this.phone
				}).then(res => {
					console.log(res);
					if (res.code==200) {
						this.istime = true
						this.timer = setInterval(() => {
							if (this.countdown > 0) {
								this.countdown--;
							} else {
								this.istime = false
								clearInterval(this.timer)
							}
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000,
						});
					}
				})
			},
			register() {
				// uni.navigateTo({
				// 	url:'/pages/inlet/realname'
				// })
				// return
				var hint
				// if (!this.oldPassword && this.type == 1) {
				// 	hint = '请输入原密码'
				// } else 
				if (!hint && !this.newPassword) {
					hint = '请输入新密码'
				} else if (!hint && !this.ageinPassword) {
					hint = '请再次输入新密码'
				} else if (!hint && this.newPassword != this.ageinPassword) {
					hint = '两次密码不一致，请重新输入'
				} else if (!hint && !this.checkbox1) {
					hint = '请先阅读并同意《用户协议》和《隐私政策》'
				} else if (!hint && !this.payPassword) {
					hint = '请先阅读并同意《用户协议》和《隐私政策》'
				}
				if (hint) {
					uni.showToast({
						title: hint,
						icon: 'none',
						duration: 3000
					})
					return
				}
				if (this.requestStatus) {
					return
				}
				this.requestStatus = true
				var that = this
					userRegister({
						short_name: this.nickname,
						mobile: this.phone,
						user_name: this.phone,
						code: this.code,
						email: this.email,
						user_pwd: this.newPassword,
						paypassword:this.payPassword
					}).then(res => {
						console.log(res);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						if (res.code==200) {
							uni.setStorageSync("token",res.data.token);
							uni.navigateTo({
								url:'/pages/inlet/realname'
							})
							// setTimeout(function() {
							// }, 2000)
						}
						setTimeout(function() {
							that.requestStatus = false
						}, 2000)
					})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		// height: calc(100vh - 20rpx);
		background-color: #F7F7F7;
		overflow: hidden;

		.top {
			position: relative;

		}

		.bg {
			width: 750rpx;
			// height: 420rpx;
			z-index: 80;
		}

		.font {
			width: 388rpx;
			margin: 0 auto;
			position: absolute;
			top: 160rpx;
			left: 180rpx;
			z-index: 81;
		}

		.cent {
			position: relative;
			// height: 70vh;
			margin: -80rpx 30rpx 0;
			background-color: white;
			border-radius: 12rpx;
			z-index: 88;
			overflow: hidden;

			.c_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 40rpx 30rpx 10rpx;

				.c_title_l {
					height: 52rpx;
					line-height: 52rpx;
					font-weight: 500;
					font-size: 36rpx;
					color: #FF524F;

				}

				.c_title_r {
					font-size: 26rpx;
					color: #3D3D3D;
					text {
						color: #FF524F;
					}
				}
			}
		}
	}

	.item {
		height: 110rpx;
		/* margin: 0 30rpx; */
		margin: 0 30rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;

		image {
			width: 48rpx;
			margin-right: 20rpx;
		}
	}

	.item p:nth-of-type(1) {
		font-size: 28rpx;
	}

	.item p:nth-of-type(2) {
		flex: 1;
		text-align: right;
	}

	.get {
		height: 52rpx;
		line-height: 52rpx;
		padding: 0 20rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		background-color: #FF524F;
		color: white;
	}

	input {
		text-align: right;
		font-size: 26rxp
	}

	.input_p {
		font-size: 26rpx;
		text-align: right;
	}

	.btn {
		width: 460rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(270deg, #FF5F3B 0%, #FF524F 100%);
		border-radius: 40rpx;
		color: white;
		font-size: 32rpx;
		text-align: center;
		margin: 60rpx auto 0;
	}

	.clo_9 {
		color: #999999;
	}
	.tongyi {
		margin-top: 30rpx;
		padding-bottom: 100rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		text {
			color: #FF534E;
			margin: 0 4rpx;
		}
	}
	/deep/ .uni-data-checklist{
		flex: 0;
	}
	/deep/ .uni-data-checklist .checklist-group .checklist-box {
		margin-right: 10rpx;
	}
</style>